<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>姓名</th>
          <th>地址</th>
          <th>标签</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
          <td>
            <!-- 这个地方说一下，如果你这样写，就写死了，不通用了 -->
            <!-- <span :style="{ color: item.tag === '家' ? 'blue' : 'green' }">{{
              item.tag
            }}</span> -->

            <!-- 正确的写法，在此处应该是这样，这个地方先写一个占位符，等着将来被替换 -->
            <!-- 作用域插槽还有一个作用，它还可以把遍历到的这一行的值，传递给父组件
                作用域插槽传值是一个例外，它也可以通过prop传递

                如何区分它是一个作用域插槽呢？就看他有没有传值给父组件
             -->
            <!-- <slot :row="item">{{ item.tag }}</slot> -->
            <slot name="abc" :row="item">{{ item.tag }}</slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  props: {
    data: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return []
      }
    }
  }
}
</script>
